<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>搜索引擎</title>
    <link rel="icon" href="images/girl.jpg">
</head>
<body id="body">
<!--头部div-->
<div class="headDiv">
<!--    头部左侧功能-->
    <div class="leftDiv">
        <a href="https://news.baidu.com/" class="p1" target="_blank">新闻</a>
        <a href="https://www.hao123.com/?src=from_pc" class="p1" target="_blank">hao123</a>
        <a href="https://map.baidu.com/" class="p1" target="_blank">地图</a>
        <a href="https://tieba.baidu.com/index.html" class="p1" target="_blank">贴吧</a>
        <a href="https://haokan.baidu.com/?sfrom=baidu-top" class="p1" target="_blank">视频</a>
        <a href="https://image.baidu.com/" class="p1" target="_blank">图片</a>
        <a href="https://pan.baidu.com/?from=1026962h" class="p1" target="_blank">网盘</a>
        <div id="head-left-more">
            <a href="https://www.baidu.com/more/" class="p1" target="_blank">更多</a>
            <!-- ‘更多’隐藏栏 -->
            <div id="hide-div">
                <div class="box1">
                    <!-- 放照片 -->
                    <div class="imgDiv">
                        <a href="https://fanyi.baidu.com/" target="_blank"><img src="images/translate.png" alt="翻译" class="small-img"></a>
                        <!-- 放文字 -->
                    <div class="font"><a href="https://fanyi.baidu.com/" target="_blank">翻译</a></div>
                    </div>
                    
                    <div class="imgDiv">
                        <a href="https://xueshu.baidu.com/" target="_blank"><img src="images/academic.png" alt="学术" class="small-img"></a>
                        <div class="font"><a href="https://xueshu.baidu.com/" target="_blank">学术</a></div>
                    </div>
                    
                    <div class="imgDiv">
                        <a href="https://wenku.baidu.com/" target="_blank"><img src="images/library.png" alt="文库" class="small-img"></a>
                        <div class="font"><a href="https://wenku.baidu.com/" target="_blank">文库</a></div>
                    </div> 
                </div>
                <div class="box2">
                    <!-- 放照片 -->
                    <div class="imgDiv">
                        <a href="https://baike.baidu.com/" target="_blank"><img src="images/encyclopedia.png" alt="百科" class="small-img"></a>
                        <!-- 放文字 -->
                    <div class="font"><a href="https://baike.baidu.com/" target="_blank">百科</a></div>
                    </div>
                    
                    <div class="imgDiv">
                        <a href="https://zhidao.baidu.com/" target="_blank"><img src="images/know.png" alt="知道" class="small-img"></a>
                        <div class="font"><a href="https://zhidao.baidu.com/" target="_blank">知道</a></div>
                    </div>
                    
                    <div class="imgDiv">
                        <a href="https://jiankang.baidu.com/widescreen/home" target="_blank"><img src="images/healthy.png" alt="健康" class="small-img"></a>
                        <div class="font"><a href="https://jiankang.baidu.com/widescreen/home" target="_blank">健康</a></div>
                    </div>
                </div>
                <div class="box3">
                    <!-- 放照片 -->
                    <div class="imgDiv">
                        <a href="http://e.baidu.com/ebaidu/home/?refer=887" target="_blank"><img src="images/marketing.png" alt="营销推广" class="small-img"></a>
                        <!-- 放文字 -->
                        <div class="font"><a href="http://e.baidu.com/ebaidu/home/?refer=887" target="_blank">营销推广</a></div>
                    </div>
                    
                    
                    <div class="imgDiv">
                        <a href="https://live.baidu.com/" target="_blank"><img src="images/live.png" alt="直播" class="small-img"></a>
                        <div class="font"><a href="https://live.baidu.com/" target="_blank">直播</a></div>
                    </div>
                    
                    <div class="imgDiv">
                        <a href="https://y.qq.com/?ADTAG=myqq#type=index" target="_blank"><img src="images/music.png" alt="音乐" class="small-img"></a>
                        <div class="font"><a href="https://y.qq.com/?ADTAG=myqq#type=index" target="_blank">音乐</a></div>
                    </div>
                    
                </div>
            </div>
        </div>
    </div>
<!--    头部右侧功能-->
    <div id="rightDiv">
        <div id="setDiv">
        <a href="#" class="p2">设置</a>
        <div id="hide2-div">
            <div class="setBox">
                <a href="" class="set-a">
                    <span class="set">搜索设置</span>
                </a>
                <a href="" class="set-a">
                    <span class="set">高级搜索</span>
                </a>
                <a href="" class="set-a">
                    <span class="set">开启预测</span>
                </a>
                <a href="" class="set-a">
                    <span class="set">隐私设置</span>
                </a>
                <a href="" class="set-a">
                    <span class="set">关闭热搜</span>
                </a>
            </div>
        </div>
    </div>
        <button id="btn01" type="button">登录</button>
    </div>
</div>
<div class="picDiv">
<!--    百度logo-->
    <img src="images/baidu1.png" alt="baidu">
</div>
<div class="container">
    <div class="bgDiv">
<!--搜索文本框-->
    <label>
        <input  type="text" class="search-input-text" autofocus placeholder="请输入你想要搜索的内容" id="search">
    </label>
<!--搜索一下按钮-->
    <input id="btn"  class="search-input-button" type="button" value="搜索一下">
<!--搜索拓展文本框-->
    <div class="suggest">
        <ul id="search-result">
<!--          此处放置拓展文本-->
        </ul>
    </div>
    </div>
</div>
<div id="mid">
<!--    <div id="left"></div>-->
<!--    <div id="right"></div>-->
    <div id="center">
        <div id="center-div-up">
            <div class="little">
                <a href="https://www.baidu.com/index.php?tn=monline_3_dg" class="p3" target="_blank">
                    <img class="img" src="images/baidu.png" alt="百度">

                </a>
            </div>
            <div class="little" >
                <a href="https://www.bilibili.com/" class="p3" target="_blank">
                    <img class="img" src="https://t7.baidu.com/it/u=2235388275,3809603206&fm=85&app=79&f=JPG?w=121&h=75&s=8197C732C535FA313E526557030030BB" alt="b站">

                </a>
            </div>
            <div class="little">
                <a href="https://www.zhihu.com/" class="p3" target="_blank">
                    <img class="img" src="images/zh.jpg" alt="知乎">

                </a>
            </div>
            <div class="little">
                <a href="https://www.weibo.com/" class="p3" target="_blank">
                    <img class="img" src="images/xl.png" alt="新浪微博">

                </a>
            </div>
        </div>
        <div id="center-div-down">

            <div class="little">
                <a href="https://v.qq.com/" class="p3" target="_blank">
                    <img class="img" src="images/tx.jpg" alt="腾讯视频">

                </a>
            </div>
            <div class="little">
                <a href="https://www.jd.com/?cu=true&utm_source=kong&utm_medium=tuiguang&utm_campaign=t_220520384_&utm_term=aadd748a03c44ed38446d0cf600d4630" class="p3" target="_blank">
                    <img class="img" src="images/jd.png" alt="京东">

                </a>
            </div>
            <div class="little">
                <a href="https://www.douyu.com/" class="p3" target="_blank">
                    <img class="img" src="images/dy.jpg" alt="斗鱼">

                </a>
            </div>
            <div class="little">
                <a href="https://www.huya.com/" class="p3" target="_blank">
                    <img class="img" src="images/hy.jpg" alt="虎牙">

                </a>
            </div>
        </div>
    </div>
</div>
<!--登陆弹窗-->
<div class="popOutBg"></div>
<div class="popOut">
    <span title="关闭"> x </span>
    <table>
        <caption>欢迎登录</caption>
        <tr>
            <td  class="td1">用户名：</td>
            <td><label>
                <input type="text" class="inp" placeholder="请输入用户名" />
            </label></td>
        </tr>
        <tr>
            <td>密码：</td>
            <td><label>
                <input type="password" class="inp" placeholder="请输入密码" />
            </label></td>
        </tr>
        <tr>
            <td colspan="2"><input type="button" class="login" value="登录" /></td>
        </tr>
    </table>
</div>
<!--    调用js-->
<script src="js/button.js"></script>
<script src="js/search.js"></script>
<!--    调用css样式-->
<link rel="stylesheet" href="css/search.css">
<link rel="stylesheet" href="css/button.css">
<link rel="stylesheet" href="css/total.css">
</body>
</html>